<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定样式</title>
    <style>
        .basic {
            width: 400px;
            height: 100px;
            border: 1px solid black;
        }
        .happy {
            width: 400px;
            height: 100px;
            border: 1px solid red;
        }
        .sad {
            width: 400px;
            height: 100px;
            border: 1px solid skyblue;
        }
        .normal {
            width: 400px;
            height: 100px;
            border: 1px solid sienna;
        }
        .atguigu1 {
            width: 400px;
            height: 100px;
            border: 1px solid aliceblue;
        }
        .atguigu2 {
            width: 400px;
            height: 100px;
            border: 1px solid orange;
        }
        .atguigu3 {
            width: 400px;
            height: 100px;
            border: 1px solid rebeccapurple;
        }
    </style>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--
        绑定样式：
            1. class样式
                写法：class='xxx', xxx可以是字符串、对象、数组。
                    字符串写法适用于：类名不确定，要动态获取
                    对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
                    数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用
            2. style样式
                :style="{fontSize: xxx}" 其中xxx是动态值
                :style="[a,b]" 其中a、b是样式对象
    -->
    <div id="root">
        <!--绑定class样式&#45;&#45;字符串写法，适用于: 样式的类名不确定，需要动态指定-->
        <div class="basic happy" id="demo" @click="changeMood">{{name}}</div>

        <!--绑定class样式&#45;&#45;数组写法，适用于：要绑定的样式个数不确定、名字不确定-->
        <div class="basic" :class="classArr">{{name}}</div>

        <!--绑定class样式&#45;&#45;对象写法,适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用-->
        <div class="basic" :class="classObj">{{name}}</div>

        <div class="basic" :style="styleObj">{{name}}</div>

        <div class="basic" :style="[styleObj, styleObj2]">{{name}}</div>
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#root',
            data: {
                name: '尚硅谷',
                mood: 'normal',
                classArr: ['atguigu1','atguigu2','atguigu3'],
                classObj: {
                    atguigu1: false,
                    atguigu2: false
                },
                styleObj: {
                    fontSize: '40px',
                    color: 'red',
                },
                styleObj: {
                    backgroundColor: 'orange'
                }
            },
            methods: {
                changeMood() {
                    const arr = ['happy','sad','normal']
                    const index = Math.floor(Math.random() * 3)
                    this.mood = arr[index]
                }
            }
        })
    </script>
</body>
</html>